Modifier son animation HTML

La plupart des sites internet aujourd'hui possède une animation composée de slides déroulants permettant de mettre en avant des services, des offres , des promotions...

Cette animation, par soucis de compatibilité, est au format HTML, cela vous permettra de la rendre visible sur tablette ou smartphone.

L'explication ci-dessous implique que vous manipuliez le langage HTML. Il est donc préférable que vous fassiez une copie du code source original de l'animation avant de procéder à des modifications.

Les images

L'animation comporte différents slides. Ces images doivent, au préalable, être uploadées dans le dossier média de votre back-office, afin de les avoir sur le serveur.

Le dossier média est accessible dans la partie outil >>> publication de fichier.

La mise en place

Vous pouvez accéder au code de l'animation en vous rendant sur la page libre dans laquelle elle se trouve.

Le code de l'animation HTML se trouve dans la rubrique "texte" de la page libre.

Cliquez ensuite sur le bouton situé en haut à gauche appelé "source". Cela vous permettra de voir le code source de l'animation est ainsi de modifier les images directement depuis le code.

Vous voyez donc le code de l'animation, l'idéal est de copier ce code et de le coller dans un logiciel pour faire vos modifications.

Le logiciel se nomme "notepad++". Ce logiciel est téléchargeable en quelques secondes via google. Vous pouvez aussi le trouver ici

Une fois téléchargé et installé, ouvrez le logiciel et créez un nouveau document. Coller le code de l'animation dans ce nouveau document.

Pour une meilleure lisibilité du fichier allez dans langage >>> H >>> HTML. Vous verrez alors les caractères changer de couleur.

Vous pouvez donc commencer à travailler sur la modification des images sur le logiciel notepad++. Vous pourrez aussi sauvegarder ce fichier qui vous servira de base de travail pour les prochaines modifications.

Modifications des images

Chaque image que vous allez mettre dans l'animation s'identifie par son nom.

Exemple : anim_image1.jpg

Comme mentionné précédemment cette image aura au préalable été uploadé sur le serveur media. Vous pouvez d'ailleurs visualiser cette image en tapant dans la barre d'adresse l'url suivante : http://www.nomdevotresite.com/media/anim_image1.jpg

Dans l'animation nous enlevons le nom de domaine.

Il faut donc renseigner : /media/anim_image1.jpg

C'est ce que vous voyez dans la balise image :

L'animation est fonctionnelle grace à la structure du code HTML mis en place. Il est donc préférable de ne pas modifier autre chose que le nom du fichier appelé dans l'animation.

Une fois que vous avez effectué tous les changements nécessaires, copiez le code modifié, et collez le dans la partie "source" de la page libre en question. Sauvegardez.
Vous pouvez alors vérifez vos modifications.

Votre navigateur peut conserver en cache les anciennes images de l'animation. Il faut donc le vider. Les différentes manipulations divergent en fonction des navigateurs.
Nous avons une page expliquant cela vous pouvez la consulter ici

Ajouter ou modifier un lien

Vous pouvez bien entendu mettre un lien sur les slides de l'animation permettant ainsi au visiteur de se rendre rapidement sur ce que vous souhaitez mettre en avant : une liste promotionnelle, un produit de la semaine, une page libre...

Il y a 2 possibilités pour modifier ou ajouter un lien sur un texte ou une image (la méthode est la même) :

1. Vous pouvez utiliser le code source de la page . C'est ce que nous allons voir ensemble en dessous

2. Vous pouvez utiliser l'outil sans passer par le code source. Pour cela je vous laisse voir ce lien

La deuxième possibilité est plus simple que la première mais pour les plus téméraires veuillez être attentif à ce qui va suivre.

Vous devez donc retourner dans le code source de la page toujours en cliquant sur la petite icône appelée source en haut à gauche une fois que vous êtes dans l'onglet texte de la page libre.

Vous voyez alors le code source. Celui de l'animation est mis en place. Le support se charge de le faire et généralement il est prévu que la structure pour la mise en place d'un lien hypertexte sur une image soit déjà présente.

Vous pouvez voir sur le screenshot ci-dessous la structure HTML de base. Vous voyez qu'une balise a été rajouté (encadrée en rouge).
Cette balise est propre à l'information d'un lien hypertexte. Il faut donc renseigner l'url de la page vers laquelle vous désirez être redirigé à la place du # entre les guillemets.

Par exemple vous souhaitez que lorsque l'on clique sur l'image l'on soit redirigé vers le suite google. Il faut mettre :

Une fois les modifications faites vous pouvez enregistrez et vérifiez vos modifications.